<!--
 * @Author: your name
 * @Date: 2022-04-27 09:39:34
 * @LastEditTime: 2024-11-25 11:25:07
 * @LastEditors: 番茄炒蛋蛋 wzh15802755802@163.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jzjy\src\views\PersonalCenter\index.vue
-->
<template>
  <div id="container">
    <div class="content">
      <div class="left">
        <!-- <div class="top">
          <img :src="file_url" alt="" v-if="file_url != ''" />
          <img src="../../assets/img/mrtx.png" v-if="file_url == ''" />
          <div class="nameTop">
            <h3>{{ title }}</h3>
            <img src="../../assets/img/shiyongban.png" v-show="shiyong" />
          </div>
          <div class="daoqiDate" v-show="shiyong">
            <a>{{ numDay }}</a
            >天后到期，如继续使用，请联系客服进行开通
          </div>
        </div> -->
        <div class="nav">
          <el-menu
            router
            :default-active="onRoutes"
            class="el-menu-vertical-demo"
            background-color="#FFFFFF"
            text-color="#646566"
            active-text-color="#08A579"
          >
            <el-menu-item index="/personal">
              <i class="el-icon-user"></i>
              <span slot="title">我的首页</span>
            </el-menu-item>
            <el-menu-item index="/personal/ChangeClass">
              <i class="el-icon-document-copy"></i>
              <span slot="title">切换年级/学科/版本</span>
            </el-menu-item>
            <el-menu-item index="/personal/MyDownLoad">
              <i class="el-icon-download"></i>
              <span slot="title">我的下载</span>
            </el-menu-item>
            <!-- <el-menu-item index="/personal/MyActive">
              <i class   ="el-icon-lollipop"></i>
              <span slot="title">我的活动</span>
            </el-menu-item> -->
            <el-menu-item index="/personal/MyCollect">
              <i class="el-icon-star-off"></i>
              <span slot="title">我的收藏</span>
            </el-menu-item>
            <el-menu-item index="/personal/MyClass">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">我的活动</span>
              <!-- <span slot="title">我的课程</span> -->
            </el-menu-item>
            <el-menu-item index="/personal/MyTeachPlan">
              <i class="el-icon-notebook-1"></i>
              <span slot="title">我的教学计划</span>
            </el-menu-item>
            <el-menu-item index="/personal/OrderList">
              <i class="el-icon-tickets"></i>
              <span slot="title">我的订单</span>
            </el-menu-item>
            <!-- <el-menu-item index="/personal/Question">
              <i class="el-icon-document"></i>
              <span slot="title">调研问卷</span>
            </el-menu-item> -->
            <el-menu-item index="/personal/Custom">
              <i class="el-icon-user"></i>
              <span slot="title">
                <el-badge class="item"> 客服 </el-badge>
              </span>
            </el-menu-item>
            <!-- <el-menu-item index="/personal/MyData">
              <i class="el-icon-data-analysis"></i>
              <span slot="title">个人数据</span>
            </el-menu-item>
            <el-menu-item index="/personal/SchoolData">
              <i class="el-icon-data-line"></i>
              <span slot="title">学校数据</span>
            </el-menu-item> -->
            <!-- <el-menu-item index="/personal/Subscription">
              <i class="el-icon-collection-tag"></i>
              <span slot="title">资源订阅</span>
            </el-menu-item> -->
            <el-menu-item @click="logout">
              <i class="el-icon-lock"></i>
              <span slot="title">退出登录</span>
            </el-menu-item>
          </el-menu>
        </div>
      </div>
      <div class="right">
        <router-view :title="title" :msg="msg" />
      </div>
    </div>
  </div>
</template>

<script>
import { userinfo, logout } from "../../api/http";
import { timeStamp2String } from "../../utils/time";
export default {
  components: {},
  data() {
    return {
      // activeIndex: "", //左侧菜单栏选中值
      file_url: "", //头像地址
      title: "", //昵称
      timeStamp2String,
      shiyong: false, //是否试用版
      numDay: "", //使用剩余天数
      msg:{},//信息汇总
    };
  },
  created() {
    //回到顶部
    $(document).ready(function () {
      $(window).scrollTop(0);
    });
    //当前路由路径
    this.activeIndex = this.$route.path;
    // console.log(this.activeIndex);

    userinfo({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      if (res.retInt == 1) {
        if (res.retRes.type_id == 2) {
          this.shiyong = true;
          this.numDay = Math.floor(
            (res.retRes.sy_end_time * 1000 - Date.parse(new Date())) /
              (24 * 3600 * 1000)
          );
        } else {
          this.shiyong = false;
        }
        if (res.retRes.sy_end_time * 1000 < Date.parse(new Date())) {
          this.$router.push({
            name: "Login",
            query: {
              isgq: 1,
            },
          });
        } else {
          // console.log(
          //   timeStamp2String(res.retRes.sy_end_time * 1000, 2),
          //   "在个人主页获取的个人信息数据"
          // );
          // console.log(
          //   Math.floor(
          //     (res.retRes.sy_end_time * 1000 - Date.parse(new Date())) /
          //       (24 * 3600 * 1000)
          //   )
          // );
          // console.log(res.retRes.sy_end_time * 1000 > Date.parse(new Date()));
          this.file_url = res.retRes.file_url;
          this.title = res.retRes.title;
          this.msg = {title:this.title,file_url:this.file_url,kemu_id:res.retRes.kemu_id}
        }
      }
    });
  },
  computed:{
    onRoutes(){
      const route = this.$route
      const { meta, path } = route
      if (meta.activeIndex) {
        return meta.activeIndex
      }
      return path
    }
  },
  // watch:{
  //   $route(val){
  //     console.log(val.fullPath,"hahaha")
  //     this.activeIndex = val.fullPath
  //   }
  // },
  methods: {
    //退出登录
    logout() {
      this.$confirm("是否退出登录", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info ",
      })
        .then(() => {
          logout({
            md5key: localStorage.getItem("md5key"),
          }).then((res) => {
            if (res.retInt == 1) {
              localStorage.removeItem("md5key");
              this.$router.push({
                name: "Login",
              });
            }
          });
        })
        .catch(() => {
          this.$notify.closeAll();
          this.$notify({
            message: "已取消",
            duration: 1000,
            showClose: false,
          });
        });
    },
    // handleSelect(index) {
    //   console.log(this.$route.path, "123122112312133");
    //   this.activeIndex = this.$route.path
    // },
  },
};
</script>

<style lang="less" scoped>
#container {
  width: 100%;
  .el-menu-item:hover {
    background-color: #f0faf7 !important;
  }
  .content {
    display: flex;
    width: 1200px;
    margin: 30px auto 60px auto;
    margin-bottom: 20px;
    background-color: #fff;
    .left {
      margin-bottom: 100px;
      width: 299px;
      height: auto;
      border-right: 0;
      overflow: hidden;
      .top {
        padding: 0px 0 30px 0;
        text-align: center;
        border-left: 1px solid #dee0e3;
        border-top: 1px solid #dee0e3;
        img {
          margin-top: 30px;
          margin-bottom: 15px;
          width: 100px;
          height: 100px;
          border-radius: 100%;
        }
        .nameTop {
          display: flex;
          justify-content: center;
          align-items: center;
          padding-bottom: 10px;
          text-align: center;
          color: #444444;
          font-size: 16px;
          img {
            margin: 0;
            margin-left: 10px;
            width: 64px;
            height: 20px;
            border-radius: 0;
          }
        }
        .daoqiDate {
          margin: 0 auto;
          // margin-bottom: 30px;
          width: 260px;
          line-height: 28px;
          height: 28px;
          overflow: hidden;
          background: linear-gradient(
            270deg,
            #dfae78,
            #f2c491,
            #f4c998,
            #f8d6af
          );
          border-radius: 3px;
          font-size: 12px;
          color: #333333;
          a {
            color: #f05659;
          }
        }
      }
      .nav {
        // margin-top: 20px;
        user-select: none;
        border-left: 1px solid #dee0e3;
        border-bottom: 1px solid #dee0e3;

        .el-menu-item {
          height: 60px;
          line-height: 60px;
          font-size: 14px;
          color: #08a579;
          border-top: 1px solid #ccc;
          border-left: 3px solid #fff;
          i {
            font-size: 23px;
            margin-left: 75px;
            margin-right: 15px;
          }
        }
        .el-menu-item:hover {
          background-color: #fff;
        }
        .is-active {
          background-color: #f0faf7 !important;
          border-left: 3px solid #08a579;
        }
        /deep/.el-badge__content.is-fixed {
          position: absolute;
          top: 30px;
          right: -10px;
          transform: translateY(-50%) translateX(100%);
        }
      }
    }
    .right {
      width: 899px;
      border: 1px solid #dee0e3;
    }
  }
}
</style>
